/*
 * @Author: kanglang
 * @Date: 2021-01-22 15:13:35
 * @LastEditors: kanglang
 * @LastEditTime: 2021-01-29 16:59:32
 * @Description: 轴数输入框
 */
import React from 'react';
import { View, Text, StyleSheet, TextInput } from 'react-native';
import { px2dp, fontColorLightGray, mainBgColorWhite, fontColorBlack } from '@/styles';

const AxesNumInput = ({
  title,
  placeholder,
  maxLength = 2,
  value,
  onChangeText,
  keyboardType
}) => {
  const setHandle = (value) => {
    onChangeText && onChangeText(value);
  };

  return (
    <View style={styles.axesWrap}>
      <Text style={styles.axesLabel}>{title}</Text>
      <TextInput
        style={styles.axesNumber}
        placeholder={placeholder}
        maxLength={maxLength}
        keyboardType={keyboardType}
        placeholderTextColor={fontColorLightGray}
        value={value}
        onChangeText={(text) => { setHandle(text); }}
      />
    </View>
  );
};
export default AxesNumInput;
const styles = StyleSheet.create({
  axesWrap: {
    width: '100%',
    height: px2dp(100),
    marginTop: px2dp(24),
    flexDirection: 'row',
    backgroundColor: mainBgColorWhite,
    alignItems: 'center'
  },
  axesLabel: {
    marginLeft: px2dp(32),
    marginRight: px2dp(20),
    color: fontColorBlack,
    fontWeight: 'bold'
  },
  axesNumber: {
    flex: 1,
    marginRight: px2dp(32)
  },
});
